<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/public.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="topBar">
        <div class="container">
            <ul class="topBar-lt">
                <li class="menu1"><a href="">E宠首页</a></li>
                <li class="menu2"><a href="">送至：</a></li>
                <li class="menu3"><a href="">重庆<i></i></a>
                    <div class="infor">
                        <div class="infor-hd">
                            <span class="list1">四川</span>
                            <span class="list2">请选择</span>
                            <i></i>
                        </div>
                        <div class="infor-con">
                            <p>
                                <span>华北:</span>
                                <a href="">北京</a>
                                <a href="">天津</a>
                                <a href="">河北</a>
                                <a href="">山西</a>
                                <a href="">内蒙古</a>
                            </p>
                            <p>
                                <span>华东:</span>
                                <a href="">上海</a>
                                <a href="">江苏</a>
                                <a href="">浙江</a>
                                <a href="">安徽</a>
                                <a href="">福建</a>
                                <a href="">山东</a>
                            </p>
                            <p>
                                <span>华南:</span>
                                <a href="">广东</a>
                                <a href="">广西</a>
                                <a href="">海南</a>
                            </p>
                            <p>
                                <span>华中:</span>
                                <a href="">江西</a>
                                <a href="">河南</a>
                                <a href="">湖北</a>
                                <a href="">湖南</a>
                            </p>
                            <p>
                                <span>西南:</span>
                                <a href="">重庆</a>
                                <a href="">四川</a>
                                <a href="">贵州</a>
                                <a href="">云南</a>
                                <a href="">西藏</a>
                            </p>
                            <p>
                                <span>西北:</span>
                                <a href="">陕西</a>
                                <a href="">甘肃</a>
                                <a href="">青海</a>
                                <a href="">宁夏</a>
                                <a href="">新疆</a>
                            </p>
                            <p>
                                <span>东北:</span>
                                <a href="">辽宁</a>
                                <a href="">吉林</a>
                                <a href="">黑龙江</a>
                            </p>
                            <p>
                                <span>其他:</span>
                                <a href="">香港</a>
                                <a href="">澳门</a>
                                <a href="">台湾</a>
                                <a href="">钓鱼岛</a>
                                <a href="">南沙群岛</a>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="menu4"><a href="">E宠就是正品</a></li>
            </ul>
            <ul class="topBar-rt">
                <li class="menu1"><a href="">[登录]</a></li>
                <li class="menu1"><a href="">[注册]</a></li>
                <li class="menu2"><a href=""><i></i>购物车(<em style="color: red;">0</em>)</a></li>
                <li class="menu3"><a href=""><i class="lt"></i>我的E宠<i class="rt"></i></a>
                    <div class="infor">
                        <p><span></span><a href="">我的订单</a></p>
                        <p><span></span><a href="">退换货记录</a></p>
                        <p><span></span><a href="">我的优惠券</a></p>
                        <p><span></span><a href="">我的余额</a></p>
                        <p><span></span><a href="">VIP俱乐部</a></p>
                    </div>
                </li>
                <li class="menu4"><a href=""><i class="lt"></i>收藏<i class="rt"> </i></a>
                    <div class="infor">
                        <p><span></span><a href="">我的收藏</a></p>
                    </div>
                </li>
                <li class="menu5"><a href=""><i></i>手机版</a></li>
                <li class="menu6"><a href="">问题反馈</a></li> 
            </ul>
        </div>
    </div>
    <!-- 头部区域 -->
    <div class="header">
        <div class="container">
            <div class="logo">
                <img src="./img/index/epet-logo.png" alt="" height="94">
            </div>
            <div class="header-input">
                <div class="search">
                    <input type="text" placeholder="小青鲨">
                    <span>搜索</span>
                </div>
                <div class="nav">
                    <i>热门搜索</i>
                    <a href="" class="list">清仓特惠低至2.4折</a>
                    <span>|</span>
                    <a href="">驱虫好物</a>
                    <span>|</span>
                    <a href="">驱虫好物</a>
                    <span>|</span>
                    <a href="">主粮抽检</a>
                    <span>|</span>
                    <a href="">勃林格爆款驱虫 </a>
                </div>
            </div>
            <div class="car">
               <a href=""> 购物车( <em>0</em>)</a>
            </div>
        </div>
    </div>
    <!-- 头部导航栏 -->
    <div class="header-nav">
        <div class="container">
            <div class="menu">
                <span class="dog">
                    <a href="">狗狗<i></i></a>
                    <div class="inf">
                        <div class="top">
                            <span></span>
                            <p class="title"><i>3863</i>种精选宝贝</p>
                            <p class="link">正在狗狗站溜达...</p>
                            <div class="advertise">
                                <img src="./img/index/dogpack99.jpg" alt="" height="180">
                            </div>
                        </div>
                        <div class="boot">
                            <span></span>
                            <p class="title"><i>2899</i>种精选宝贝</p>
                            <p class="link">切换到猫猫站</p>
                            <div class="advertise">
                                <img src="./img/index/dogpack99.jpg" alt="" height="180">
                            </div>
                        </div>
                    </div>
                </span>
                <span class="cat">
                    <a href="">商品分类<i></i></a>
                    <ul class="inf">
                        <li>
                            <a href="">主粮</a>
                            <a href="">零食</a>
                           <div class="product"></div>
                        </li>
                        <li>
                            <a href="">玩具</a>
                            <a href="">清洁</a>
                        </li>
                        <li>
                            <a href="">保健</a>
                            <a href="">护理</a>
                        </li>
                        <li>
                            <a href="">生活</a>
                            <a href="">牵引</a>
                        </li>
                        <li class="item">
                            <a href="">洗澡</a>
                            <a href="">服饰</a>
                        </li>
                    </ul>
                </span>
            </div>
            <div class="nav">
                <a href=""><i></i>品牌特卖</a>
                <a href=""><i></i>潮品视屏</a>
                <a href=""><i></i>小剧场</a>
                <a href=""><i></i>E宠课堂</a>
                <a href=""><i></i>萌爪联盟</a>
                <a href=""><i></i>清仓特价</a>
            </div>
        </div>
    </div>
    <!-- 单独区域 -->
    <div class="img">
        <div class="container">
            <img src="./img/index/11.jpg" alt="" height="360" width="770">
            <div class="right">
                <a href=""><img src="./img/index/right1.jpg" alt=""></a>
                <a href=""><img src="./img/index/right2.jpg" alt=""></a>
                <a href=""><img src="./img/index/right3.jpg" alt=""></a>
            </div>
        </div>
    </div>
</body>

</html>